<template>
	<view>
		<view class="top">
			<view class="input-view">
				<uni-icons class="input-uni-icon" type="search" size="22" color="#666666" />
				<input confirm-type="search" class="nav-bar-input" type="text" placeholder="输入搜索关键词" >
			</view>
		</view>
		<!--轮播-->
		<view >
			<swiper id="lunbo" interval="3000"  autoplay indicator-dots circular>
				<swiper-item @click="proDetail(21,3)"><image src="../../../static/Liu/meishilunbo/lunbo1.jpg"></image></swiper-item>
				<swiper-item @click="proDetail(22,3)"><image src="../../../static/Liu/meishilunbo/lunbo2.jpg"></image></swiper-item>
				<swiper-item @click="proDetail(20,3)"><image src="../../../static/Liu/meishilunbo/lunbo3.jpg"></image></swiper-item>
			</swiper>
		</view>
		<!--集市三种-->
		<!--模型-->
		<view class="jishi">
			<text class="icon xxxxx">&#xec26;</text>
			<text class="jishitext"><b>房车模型</b></text>
			<text class="icon gengduo" @click="goProductList(1)">更多 &#xebfc;</text>
		</view>
		<view class="outter">
			<view class="inner"  v-for="(item,index) in model" :key="item.proId" v-if="index<2" @click="proDetail(item.proId,item.categoryId)">
				<view class="proname">
					<text >{{item.proName}}</text>
				</view>
				<view class="ima">
					<image  :src="item.img[0].url"></image>
				</view>
				<view class="price">
					<text >¥{{item.price}}</text>
				</view>
			</view>
		</view>
		<!--装备-->
		<view class="jishi">
			<text class="icon xxxxx">&#xec4e;</text>
			<text class="jishitext"><b>旅游装备</b></text>
			<text class="icon gengduo" @click="goProductList(2)">更多 &#xebfc;</text>
		</view>
		<view class="outter">
			<view class="inner"  v-for="(item,index) in zhuangbei" :key="item.proId" v-if="index<2" @click="proDetail(item.proId,item.categoryId)">
				<view class="proname">
					<text >{{item.proName}}</text>
				</view>
				<view class="ima">
					<image  :src="item.img[0].url"></image>
				</view>
				<view class="price">
					<text >¥{{item.price}}</text>
				</view>
			</view>
		</view>
		<!--土特产-->
		<view class="jishi">
			<text class="icon xxxxx">&#xec5b;</text>
			<text class="jishitext icon"><b>土特产&#xec5b;</b></text>
			<text class="icon gengduo" @click="goProductList(3)">更多 &#xebfc;</text>
		</view>
		<view class="outter">
			<view class="inner"  v-for="(item,index) in ttc" :key="item.proId" v-if="index<2" @click="proDetail(item.proId,item.categoryId)">
				<view class="proname">
					<text >{{item.proName}}</text>
				</view>
				<view class="ima">
					<image  :src="item.img[0].url"></image>
				</view>
				<view class="price">
					<text >¥{{item.price}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniNavBar from "@/liucomponents/uni-nav-bar/uni-nav-bar.vue"
	export default {
		data() {
			return {
				model:[],
				zhuangbei:[],
				ttc:[],
			}
		},
		onLoad:function(){
			// 获取房车模型,只保留两个用于展示
				uni.request({
					url:this.webUrl+'/selectAllProduct?categoryId=1&pageIndex=1',
					success:(res)=>{
						this.model=res.data.obj;
					},
					fail: (err) => {
						uni.showToast({
							title:"商品加载失败"
						})
					}
				}),
				uni.request({
					url:this.webUrl+'/selectAllProduct?categoryId=2&pageIndex=1',
					success:(res)=>{
						this.zhuangbei=res.data.obj;
					},
					fail: (err) => {
						uni.showToast({
							title:"商品加载失败"
						})
					}
				}),
				uni.request({
					url:this.webUrl+'/selectAllProduct?categoryId=3&pageIndex=1',
					success:(res)=>{
						this.ttc=res.data.obj;
					},
					fail: (err) => {
						uni.showToast({
							title:"商品加载失败"
						})
					}
				})
		},
		methods: {
			goProductList(categoryId){
				uni.navigateTo({
					url:'/pages/liu/productList/productList?categoryId='+categoryId
				})
			},
			//跳转到详情页
			proDetail(proId,categoryId){
				uni.navigateTo({
					url:'/pages/liu/proDetail/proDetail?proId='+proId+'&categoryId='+categoryId
				})
			}
		}
	}
</script>

<style lang="scss">
	.top{
		width: 100%;
		height: 100rpx;
		background-color:#B0B0B0 ;
		display: flex;
		line-height: 100rpx;
		color:  #8B8B83;
		#address{
			font-size: 15rpx;
		}	
	}
	
		.input-view {
			/* #ifndef APP-PLUS-NVUE */
			display: flex;
			/* #endif */
			flex-direction: row;
			width: 300rpx;
	
			background-color: #f8f8f8;
			height: 30px;
			border-radius: 15px;
			padding: 0 15px;
			flex-wrap: nowrap;
			margin: 12px auto;
			line-height: 30px;
		}
	
		.input-uni-icon {
			line-height: 30px;
		}
	
		.nav-bar-input {
			height: 30px;
			line-height: 30px;
			/* #ifdef APP-PLUS-NVUE */
			width: 370rpx;
			/* #endif */
			padding: 0 5px;
			font-size: 28rpx;
			background-color: #f8f8f8;
		}
		
		#lunbo{
				width: 100%;
				height: 400rpx;
				image{
					width: 100%;
					height: 100%;
				}
		}	
		.jishi{
			width: 100%;
			height: 120rpx;
			background-color: rgb(70,70,70);
			line-height: 120rpx;
			display: flex;
			color:rgb(148,102,102);
			.xxxxx{
				font-size: 50rpx;
				margin-left: 30rpx;
			}
			.jishitext{
				margin-left: 30rpx;
				font-size: 30rpx;
				color: white;
			}
			.gengduo{
				margin-left: 400rpx;
				font-size: 28rpx;
				color: rgb(119,119,119);
			}
		}
		.outter{
			
			width: 750rpx;
			// height: 560rpx;
			background-color: rgb(220,220,220);
			display: flex;
			flex-wrap: wrap;
			justify-content: space-around;
			flex-direction: row;
			.inner{
				// float: left;
				background-color: white;
				width: 330rpx;
				height: 500rpx;
				margin-top:30rpx ;
				margin-bottom: 30px;
				border-radius: 20rpx;
				.proname{
					overflow: hidden;
					width: 300rpx;
					height: 80rpx;
					font-size: 35rpx;
					margin-top: 20rpx;
					margin-left: 10rpx;
					line-height: 80rpx;
				}
				.ima{
					width: 100%;
					height: 330rpx;
					image{
						width: 100%;
						height: 100%;
						
					}
				}
				.price{
					margin-left: 30rpx;
					padding-top: 10rpx;
					color: rgb(148,102,102);
				}
			}
			
		}
</style>
